<template>
	<div v-if="showCheckComponent">
		<el-form
			:inline="true"
			v-for="(items, index) in dataList"
			:key="index"
			class="flex-warp-container"
		>
			<el-form-item
				:label="`${items.label}${items.showColon ? ':' : ''}`"
				class="mb10"
			>
				<el-checkbox
					v-model="items.isCheck"
					@change="checkTitle(items.isCheck, index)"
				>
					{{ items.allSelectText ? items.allSelectText : $t('operation.activity_list.all_select') }}
				</el-checkbox>
			</el-form-item>
			<el-form-item class="mb10 ml20">
				<el-checkbox-group
					v-model="items.checkedData"
					@change="checkItem(items.checkedData, index)"
				>
					<el-checkbox
						v-for="(item, index) in items.dataChildList"
						:key="index"
						:label="item.label"
					>
						{{ item.text }}
					</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
export default {
	name: 'LabelCheckboxMultiple',
	props: {
		showCheckComponent: {
			type: Boolean,
			default: true
		},
		dataList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			allSelectData: [],
			propsDataList: []
		}
	},
	mounted() {},
	methods: {
		checkItem(val, index) {
			this.allSelectData = []
			this.allSelectData.push(val)
			const checkedCount = val.length
			this.dataList[index].isCheck =
				checkedCount === this.dataList[index].dataChildList.length
			this.$emit('getSelectData', this.allSelectData[0])
		},
		checkTitle(val, index) {
			const arr = []
			const re = this.dataList[index].dataChildList
			// 全选
			if (val) {
				for (let i = 0; i < re.length; i++) {
					arr[i] = re[i]['label']
				}
			}
			this.dataList[index].checkedData = arr
			this.$emit('getSelectData', this.dataList[index].checkedData)
		},
		clearAllSelect() {
			this.propsDataList = this.dataList
			for (const item in this.propsDataList) {
				this.dataList[item]['isCheck'] = false
				this.dataList[item]['checkedData'] = false
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.mb10 {
	margin-bottom: 0px !important;
}
</style>
